<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title></title>
        <script type='text/javascript'>
            
            var CTP_WEB_FULLPATH = '../../';
        </script>
        <link href='../../css-debug/jquery/ui.core.css' rel='stylesheet' type='text/css'/>
        <link href='../../css-debug/jquery/ui.theme.css' rel='stylesheet' type='text/css'/>
        <link href='../../css-debug/skins/blue/ctp-common.css' rel='stylesheet' type='text/css'/>
        <link href='../../css-debug/validator.css' rel='stylesheet' type='text/css'/>
        <link href='../../css-debug/panel.css' rel='stylesheet' type='text/css'/>
        <link href='../../css-debug/gridlayout.css' rel='stylesheet' type='text/css'/>
        <link href="../../css-debug/groupbox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css-debug/button.css" rel="stylesheet" type="text/css"/>
        <link href="../../css-debug/messagebox.css" rel="stylesheet" type="text/css"/>
        <link href="../../css-debug/combobox.css" rel="stylesheet" type="text/css"/>
        <script type='text/javascript' src='../../js-debug/jquery/jquery.js'>
        </script>
        <script type='text/javascript' src='../../js-debug/jqueryui/jquery-ui.js'>
        </script>
        <script type='text/javascript' src='../../js-debug/ctp/public/jsextend.js'>
        </script>
       	<script type='text/javascript' src='../../js-debug/ctp/public/ctp.core.js'></script>
		<script type='text/javascript' src='../../js-debug/ctp/public/ctp.base.js'></script>
		<script type='text/javascript' src='../../js-debug/ctp/public/ctp.ui.component.js'></script>
    
        <script type='text/javascript' src='../../js-debug/ctp/validator/ctp.validator-rules.js'>
        </script>
        <script type='text/javascript' src='../../js-debug/ctp/validator/ctp.validator.js'>
        </script>
        <script type="text/javascript" src="../../js-debug/ctp/button/ctp.ui.button.js">
        </script>
        <script type='text/javascript' src='../../js-debug/ctp/borderlayout/jquery.layout.js'>
        </script>
        <script type='text/javascript' src='../../js-debug/ctp/panel/ctp.ui.panel.js'>
        </script>
        <script type='text/javascript' src='../../js-debug/ctp/gridlayout/ctp.ui.gridlayout.js'>
        </script>
        <script type="text/javascript" src="../../js-debug/ctp/groupbox/ctp.ui.groupbox.js">
        </script>
        <script type="text/javascript" src="../../js-debug/ctp/messagebox/ctp.ui.messagebox.js">
        </script>
        <script type="text/javascript" src="../../js-debug/ctp/textfield/ctp.ui.textfield.js">
        </script>
        <script type="text/javascript" src="../../js-debug/ctp/combobox/ctp.ui.combobox.js">
        </script>
		<script type="text/javascript" src="../../js-debug/ctp/chain/ctp.action.chain.js">
        </script>
		<script type="text/javascript" src="../../js-debug/ctp/data/ctp.data.js"></script>
        <script type='text/javascript' kind='variant'>
            
            var buttonsLayout, buttonsGroupbox, panel2, showLayout;
            var textfield1;
            var combobox1, combobox2, combobox3, combobox4, textfield1;
			var sstore;
        </script>
        <script type='text/javascript' kind='event'>
        </script>
        <script type='text/javascript' kind='ui'>
            
            $(document).ready(function(){
				sstore = new ctp.data.storeset({
					//data: data,				//静态数据
					url:"data.json",
					stores: [{
						id: "info",
						adapter:{
							//root:'info'
						}
					},
					{
						id: "oldData",
						adapter:{
							//root:'info'
						}
					}]
				})
                var button1 = new ctp.ui.button({
                    id: 'button1',
                    text: '禁用按钮',
                    width: '100%',
                    onClick: function(){
                        combobox1.setDisable(true);
                    }
                });
                var button2 = new ctp.ui.button({
                    id: 'button2',
                    text: '启用按钮',
                    width: '100%',
                    onClick: function(){
                        combobox1.setDisable(false);
                    }
                });
                var button3 = new ctp.ui.button({
                    id: 'button3',
                    text: '是否禁用',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: combobox1.isDisable()
                        });
                    }
                });
                var button4 = new ctp.ui.button({
                    id: 'button4',
                    text: '选择值为combobox6的项',
                    width: '100%',
                    onClick: function(){
                        combobox1.setValue("combobox6");
                    }
                });
                var button5 = new ctp.ui.button({
                    id: 'button5',
                    text: '取得选择的值',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: combobox1.getValue()
                        });
                    }
                });
                var button6 = new ctp.ui.button({
                    id: 'button6',
                    text: '取得选择的文本',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: combobox1.getSelectedText()
                        });
                    }
                });
                var button7 = new ctp.ui.button({
                    id: 'button7',
                    text: '设置2个按钮不可用',
                    width: '100%',
                    text: '文本为管理部所在索引',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: combobox1.getIndexByText("管理部")
                        });
                    }
                });
                var button8 = new ctp.ui.button({
                    id: 'button8',
                    text: '选择第二项',
                    width: '100%',
                    onClick: function(){
                        combobox1.setSelectedByIndex(1);
                    }
                });
                var button9 = new ctp.ui.button({
                    id: 'button9',
                    text: '删除所有项',
                    width: '100%',
                    onClick: function(){
                        combobox1.delAllItems();
                    }
                });
                var button10 = new ctp.ui.button({
                    id: 'button10',
                    text: '删除当前选择的项',
                    width: '100%',
                    onClick: function(){
                        combobox1.delSelectedItem();
                    }
                });
                var button11 = new ctp.ui.button({
                    id: 'button11',
                    width: '100%',
                    text: '取得成员数量',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: combobox1.getItemsCount()
                        });
                    }
                });
                var button12 = new ctp.ui.button({
                    id: 'button12',
                    width: '100%',
                    text: '改变前后的值',
                    onClick: function(){
                        combobox1.onChange(function(oldValue,newValue){
                            ctpMSB.alert({
                                title: '信息提示',
                                message: "你改变了值,改变前值:"+oldValue+",改变后值:"+newValue
                            });
                        });
                    }
                });
                var button13 = new ctp.ui.button({
                    id: 'button13',
                    width: '100%',
                    text: '触发用户选择函数',
                    onClick: function(){
                        combobox1.onSelect(function(oldValue,newValue){
                            ctpMSB.alert({
                                title: '信息提示',                               
								message: "你进行了选择,选择前值:"+oldValue+",选择后值:"+newValue
                            });
                        });
                    }
                });
                var button14 = new ctp.ui.button({
                    id: 'button14',
                    width: '100%',
                    text: '设置宽度90%',
                    onClick: function(){
                        combobox1.setWidth("90%");
                    }
                });
                var button15 = new ctp.ui.button({
                    id: 'button15',
                    width: '100%',
                    text: '在头部增加下拉列表项',
                    onClick: function(){
                        combobox1.newItems([{
                            text: '头部新成员1',
                            value: 'headnew1'
                        }, {
                            text: '头部新成员2',
                            value: 'headnew2'
                        }],"head");
                    }
                });
				var button16 = new ctp.ui.button({
                    id: 'button16',
                    width: '100%',
                    text: '在尾部增加下拉列表项',
                    onClick: function(){
                        combobox1.newItems([{
                            text: '尾部新成员1',
                            value: 'tailnew1'
                        }, {
                            text: '尾部新成员2',
                            value: 'tailnew2'
                        }],"tail");
                    }
                });
                var button17 = new ctp.ui.button({
                    id: 'button17',
                    width: '100%',
                    text: '取得下拉列表框当前设置',
                    onClick: function(){
                        ctpMSB.alert({
                            title: '信息提示',
                            message: "初始设置ID："+combobox1.settings.id
                        });
                    }
                });
				var button18 = new ctp.ui.button({
                    id: 'button18',
                    width: '100%',
                    text: '获得焦点',
                    onClick: function(){
                        combobox1.focus();
                    }
                });
				var button19 = new ctp.ui.button({
                    id: 'button19',
                    width: '100%',
                    text: '失去焦点',
                    onClick: function(){
                        combobox1.blur();
                    }
                });
				var button20 = new ctp.ui.button({
                    id: 'button20',
                    width: '100%',
                    text: '删除组件',
                    onClick: function(){
                        combobox1.remove();
                    }
                });
				
                
                var combobox2 = new ctp.ui.combobox({
                    id: 'comboboxID1',
                    width: '155px'
                });
                var chain1 = new ctp.action.chain({
                    id: 'chain1',
                    target: combobox2//,
					//store:sstore//.getStore("info")
                    //url: 'combobox_data.json'
                });
                combobox1 = new ctp.ui.combobox({
                    id: 'comboboxID',
                    width: '155px',
                    defaultItems:[{text:'---请选择---',  value:'',selected:'true'}],
					//remote:{"url":"combobox_data.json"},
					//items:centerDepArr,
					//storeKey:'info',
					store:sstore.getStore("info"),
					chainTarget:[chain1]
                });		       
                showLayout = new ctp.ui.gridlayout({
                    id: 'showLayout',
                    width: '100%',
                    height: '160px',
                    cols: 2,
                    colSpace: 3,
                    items: [[{
                        element: combobox1
                    },{
                        element: combobox2
                    }]]
                });
                
                buttonsLayout = new ctp.ui.gridlayout({
                    id: 'buttonsLayout',
                    width: '98%',
                    cols: 3,
                    align: 'center',
                    colSpace: 30,
                    items: [[{
                        element: button1
                    }, {
                        element: button2
                    }, {
                        element: button3
                    }], [{
                        element: button4
                    }, {
                        element: button5
                    }, {
                        element: button6
                    }], [{
                        element: button7
                    }, {
                        element: button8
                    }, {
                        element: button9
                    }],
					[{
                        element: button10
                    }, {
                        element: button11
                    }, {
                        element: button12
                    }],
					[{
                        element: button13
                    }, {
                        element: button14
                    }, {
                        element: button15
                    }],
					[{
                        element: button16
                    },
					{
                        element: button17
                    },
					{
                        element: button18
                    }],
					[{
                        element: button19
                    },
					{
                        element: button20
                    }]]
                
                });
                var showGroupbox = new ctp.ui.groupbox({
                    id: 'showGroupbox',
                    items: [showLayout],
                    title: '效果展示区'
                });
                buttonsGroupbox = new ctp.ui.groupbox({
                    id: 'buttonsGroupbox',
                    items: [buttonsLayout],
                    width: '100%',
                    title: '功能测试区'
                });
                panel2 = new ctp.ui.panel({
                    id: 'panel2',
                    title: 'combobox组件',
                    width: '800px',
                    height: '500px',
                    align: 'center',
                    items: [showGroupbox, buttonsGroupbox],
                    renderTo: 'body'
                });
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.combobox实例</b>
        <hr/>
        <br/>
    </BODY>
</html>
